{layout name="layout" /}

<link rel="stylesheet" type="text/css" href="/static/index/css/detail.css" />
<link rel="stylesheet" type="text/css" href="/static/index/css/swiper.min.css" />

<style>
    table {
        border-collapse: collapse;
        empty-cells: show;
        border-spacing: 0;
        border: 1px solid #ccc;
    }

    th,
    td {
        padding: 4px 15px;
        margin: 0;
        vertical-align: top;
        border: 1px solid #ccc;
        max-width: 340px;
        word-break: break-word;
    }

    th {
        font-weight: bold;
        background-color: #eee;
        text-align: left;
    }
</style>

<div class="main_m fl">
	<!-- 面包屑 -->
	<div class="main_m_h"><a href="/index.html">首页</a>&nbsp;&gt;&nbsp;
		{notempty name="data_category.grandparent"}<a href="{:url('data_content/edataclass', 'cid='.$data_category.grandparent.id)}">{$data_category.grandparent.name}</a>&nbsp;&gt;&nbsp;{/notempty}
		<a href="{:url('data_content/edataclass', 'cid='.$data_category.parent.id)}">{$data_category.parent.name}</a>&nbsp;&gt;&nbsp;
        <a href="{:url('data_content/dataList', ['cid'=>$data_category.id, 'tablename'=>$tablename])}">{$data_category.name}</a>
    </div>
    {notempty name="data"}
    <h2>{$data.title}</h2>
    <p><span>发布日期：{$data.create_time|date="Y-m-d  H:i:s", ###}</span><span>浏览次数:{$data.clicks}</span></p>
    <div class="biaoge">
        <div class="swiper-container" style="width: 600px; height: 300px;">
            <div class="swiper-wrapper">
                {notempty name="data.metallograph_file"}
                {php}$metallograph_file=explode(",", $data['metallograph_file']);{/php}
                {foreach $metallograph_file as $value}
                {php}
                list($thumb,$pic)=explode("::::::", $value);
                {/php}
                <div class="swiper-slide"><a href="javascript:viewPicture('{$pic}');" title="点击查看大图"> <img src="{$thumb}" style="max-width:600px;max-height: 300px;"></a></div>
                {/foreach}
                {/notempty}
                <!-- <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div> -->
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="min-width: 120px;">项目</th>
                    <th style="min-width: 160px;">数据</th>
                </tr>
            </thead>
            <tbody>
                {foreach $table_extra_columns as $value}
                {php} if ($value->column_name_en == 'metallograph_file') { continue; }{/php}
                <tr>
                    <td>
                        <div style="text-align: left;">{$value.column_name_cn}</div>
                    </td>
                    <td>
                        <div class="col-md-4">{$data[$value.column_name_en]}</div>
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>
    {/notempty}
</div>

<!--遮罩弹窗-->
<style>
.shadow{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:998;
    background-color:#000;
    opacity:0.6;
    display:none;
}
.modal{
    position: absolute;
    width: 800px;
    background: white;
    opacity: 1;
    /* height: 80px; */
    /* 水平垂直居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* 超出高度右侧出现垂直滚动条 */
    overflow:auto;
    overflow-x:hidden;
    /* //其他属性   */
    z-index:999;
    display:none;
}
.close {
    text-align: right;
}
</style>
<!--遮罩层-->
<div class="shadow">
</div>
<!--子窗口-->
<div class="modal">
    <h2 class="close">
        <a href="javascript:;" onclick="closeView()"> X </a>
    </h2>
    <img id="viewpic" style="width: 800px; max-height: 600px;" src="" alt="">
<div>

<script src="/static/index/js/swiper.min.js"></script>
<script>
    function viewPicture(picname) {
        $("#viewpic").attr('src', picname);
        $(".shadow").css('display', 'block');
        // $(".shadow").css('display', 'block');
        $('.modal').show();
        return 0;
    }

    function closeView() {
        $("#viewpic").attr('src', '');
        $('.modal').hide();
        $(".shadow").hide();
    }


    $(document).ready(function () {
    var mySwiper = new Swiper ('.swiper-container', {
    //   direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      
      // 如果需要滚动条
    //   scrollbar: {
    //     el: '.swiper-scrollbar',
    //   },
    })
})
</script>
